import Vue from 'vue';
import Axios from 'axios';
import Qs from 'qs';
import VModal from 'vue-js-modal';
import paging from '../../../../components/pageing/paging';
import "./list.css";
Vue.use(VModal,{dialog:true});
export default {
    template:` 
                <ul id="skin-list">
                    <li v-for="item in data" v-bind:key="item.id">
                        <div ref="maps" :id="'map'+item.id" :data-value="item.value"></div>
                        <p class="name">{{item.name}}</p>
                        <p class="delete" v-if="item.source == '1'" @click.stop="del(item.id)"><i class="iconfont icon-shanchu"></i></p>
                    </li> 
                    <div id="pages"><paging v-on:change-page="changePage" v-bind:total="total" v-bind:return-num="returnNum"></paging></div>
                    <v-dialog style="z-index:99999999999;" />
                </ul> 
            `,
    data:function(){
        return {
            url:$('#louie').attr('data-url'),
            data:[],    //皮肤数据
            returnNum:10,  //请求数据数量
            pageNum:1,  //当前page页面
            total:0,
        }
    },
    components:{
        paging
    },
    created(){
        this.createSystemSkin()
            .then(()=>{
                this.getSkinList();
                this.getSkinTotal();
            })
            .catch(error=>console.log(error));
    },
    methods: {
        //创建系统皮肤
        createSystemSkin(){
            return Axios.post(this.url,Qs.stringify({
                pages:"mapSkin",
                doing:"createSystemSkin"
            }));
        },
        //获取皮肤总数
        getSkinTotal(){
            Axios.post(this.url,Qs.stringify({
                pages:"mapSkin",
                doing:"getSkinTotal"
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.total = parseInt(res.data.data);
                    }
                });
        },
        //获取皮肤列表
        getSkinList(){
            Axios.post(this.url,Qs.stringify({
               pages:"mapSkin",
               doing:"getSkinList",
               limit:[(this.pageNum-1)*this.returnNum,this.returnNum],
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.data = res.data.data;
                        this.$nextTick(function(){
                            this.setMapSkin();
                        });
                    }
                });
        },
        //设置地图皮肤
        setMapSkin(){
            this.$refs.maps.forEach(function(item){
                new AMap.Map(item.getAttribute("id"),{
                    mapStyle:"amap://styles/"+item.getAttribute("data-value")
                });
            });
        },
        //点击分页
        changePage:function(page){
            this.pageNum = page;
            this.getSkinList();
        },
        //删除皮肤
        del:function(skin_id){
            this.confirm("确定要删除皮肤吗？",(res)=>{
                if(res){
                    Axios.post(this.url,Qs.stringify({
                        "pages":"mapSkin",
                        "doing":"delete",
                        skin_id
                    }))
                        .then((res)=>{
                            if(res.data.status == "success"){
                                this.getSkinTotal();
                                this.getSkinList();
                            }
                        });
                }
            });
        },
        //confirm
        confirm:function(text,call){
            var self = this;
            this.$modal.show('dialog',{
                text:text,
                buttons:[
                    {
                        title: '取消',
                        handler:function(){
                            self.$modal.hide('dialog');
                            call(false);
                        }
                    },
                    {
                        title: '确认',
                        default: true,
                        handler:function(){
                            self.$modal.hide('dialog');
                            call(true);
                        }
                    }
                ]
            });
        }
    }
};